<!DOCTYPE html>
<html lang="en" class="app">

<head>
  <meta charset="utf-8" />
  <title>Notebook | Web Application</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"
  />

  <link rel="stylesheet" href="css/bootstrap.css" type="text/css"
  />
  <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css"
  />
  <link rel="stylesheet" href="less/app.css" type="text/css" />
  <link rel="stylesheet" href="less/message.css" type="text/css"
  />
  <!--[if lt IE 9]>
    <script src="plugins/ie/html5shiv.js"></script>
    <script src="plugins/ie/respond.min.js"></script>
    <script src="plugins/ie/excanvas.js"></script>
  <![endif]-->
</head>

<body>
  <section class="vbox">
    <!-- header -->
    <header class="bg-dark dk header navbar navbar-fixed-top-xs">
      <div class="navbar-header aside-md">
        <a class="btn btn-link visible-xs" data-toggle="class:nav-off-screen,open"
          data-target="#nav,html">
          <i class="fa fa-bars"></i>
        </a>
        <a href="#" class="navbar-brand" data-toggle="fullscreen">
          <img src="images/logo.png" class="m-r-sm">Notebook</a>
        <a class="btn btn-link visible-xs" data-toggle="dropdown" data-target=".nav-user">
          <i class="fa fa-cog"></i>
        </a>
      </div>
      <ul class="nav navbar-nav hidden-xs">
        <li class="dropdown">
          <a href="messageList.html" class="dropdown-toggle dker">
            <span id="NewInfo" class="font-bold">暂无新消息</span>
          </a>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right m-n hidden-xs nav-user">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            <span class="thumb-sm avatar pull-left">
              <img src="images/avatar.jpg">
            </span>
            John.Smith
            <b class="caret"></b>
          </a>
          <ul class="dropdown-menu animated fadeInRight">
            <span class="arrow top"></span>
            <li>
              <a href="#">Settings</a>
            </li>
            <li>
              <a href="profile.html">Profile</a>
            </li>
            <li>
              <a href="#">
                <span class="badge bg-danger pull-right">3</span>
                Notifications
              </a>
            </li>
            <li>
              <a href="docs.html">Help</a>
            </li>
            <li class="divider"></li>
            <li>
              <a href="modal.lockme.html" data-toggle="ajaxModal">Logout</a>
            </li>
          </ul>
        </li>
      </ul>
    </header>

    <!-- section -->
    <section>
      <section class="hbox stretch">
        <!-- left -->
        <aside class="bg-dark lter aside-md hidden-print" id="nav">
          <section class="vbox">
            <section class="w-f scrollable">
              <div class="slim-scroll" data-height="auto" data-disable-fade-out="true"
                data-distance="0" data-size="5px" data-color="#333333">
                <nav class="nav-primary hidden-xs">
                  <ul class="nav">
                    <li name="salers">
                      <a href="javascript:;">
                        <i class="fa fa-columns icon">
                          <b class="bg-warning"></b>
                        </i>
                        <span class="pull-right">
                          <i class="fa fa-angle-down text"></i>
                          <i class="fa fa-angle-up text-active"></i>
                        </span>
                        <span>商家</span>
                      </a>
                      <ul class="nav lt">
                        <li>
                          <a href="salers.html">
                            <i class="fa fa-angle-right"></i>
                            <span>商家管理</span>
                          </a>
                        </li>
                        <li>
                          <a href="redBagManage.html">
                            <i class="fa fa-angle-right"></i>
                            <span>红包管理</span>
                          </a>
                        </li>
                        <li>
                          <a href="djq.html">
                            <i class="fa fa-angle-right"></i>
                            <span>代金券管理</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                    <li name="order">
                      <a href="order.html">
                        <i class="fa fa-pencil icon">
                          <b class="bg-info"></b>
                        </i>
                        <span>订单管理</span>
                      </a>
                    </li>
                    <li name="identify">
                      <a href="identify.html">
                        <i class="fa fa-pencil icon">
                          <b class="bg-danger"></b>
                        </i>
                        <span>认证信息</span>
                      </a>
                    </li>
                    <li name="balance">
                      <a href="balance.html">
                        <i class="fa fa-pencil icon">
                          <b class="bg-primary"></b>
                        </i>
                        <span>余额管理</span>
                      </a>
                    </li>
                    <li name="salers">
                      <a href="javascript:;">
                        <i class="fa fa-columns icon">
                          <b class="bg-warning"></b>
                        </i>
                        <span class="pull-right">
                          <i class="fa fa-angle-down text"></i>
                          <i class="fa fa-angle-up text-active"></i>
                        </span>
                        <span>官方账号</span>
                      </a>
                      <ul class="nav lt">
                        <li>
                          <a href="messageList.html">
                            <i class="fa fa-angle-right"></i>
                            <span>消息列表</span>
                          </a>
                        </li>
                        <li>
                          <a href="">
                            <i class="fa fa-angle-right"></i>
                            <span>群发消息</span>
                          </a>
                        </li>
                      </ul>
                    </li>
                  </ul>
                </nav>
              </div>
            </section>

            <!-- 缩小到侧边栏 -->
            <footer class="footer lt hidden-xs b-t b-dark">
              <a href="#nav" data-toggle="class:nav-xs" class="pull-right btn btn-sm btn-dark btn-icon">
                <i class="fa fa-angle-left text"></i>
                <i class="fa fa-angle-right text-active"></i>
              </a>
            </footer>
          </section>
        </aside>
        <!-- left -->

        <section class="vbox">
          <section class="scrollable padder">
            <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
              <li>
                <i class="fa fa-home"></i>首页
              </li>
              <li>
                <a href="messageList.html">消息列表</a>
              </li>
              <li class="chatTo">
              </li>
            </ul>
            <section class="panel panel-default">
              <div class="panel-body">
                <h5 class="m-t-none">
                  <i class="fa fa-user text-danger m-r-xs"></i>当前状态：
                  <small class="current-status"></small>
                </h5>
                <div class="chatContent">
                  <!-- <div class="answerTime text-center m-xs text-muted">2017-02-02</div> -->
                  <!-- <div class="customer m-b-md">
                    <img src="images/app.png">
                    <span class="hook">
                      <span class="hook_dec hook_top"></span>
                      <span class="hook_dec hook_btm"></span>
                    </span>
                    <div class="m-l">用户消息：法国大哥哥大哥大哥大家观看的孤独感看到顾客大股东控股的客观的空间广阔的给大家看过的看过的看过的</div>
                  </div>
                  <div class="server m-b-md">
                    <img src="images/app.png">
                    <span class="hook">
                      <span class="hook_dec hook_top"></span>
                      <span class="hook_dec hook_btm"></span>
                    </span>
                    <div class="m-r">用户消息：法国大哥哥大哥大哥大家观看的孤独感看到顾客大股东控股的客观的空间广阔的给大家看过的看过的看过的</div>
                  </div> -->
                </div>
                <div class="sendMessage">
                  <div class="emotion_editor">
                    <!-- <div class="edit_area js_editorArea" style="display: none;"></div> -->
                    <textarea class="edit_area js_editorArea" style="overflow-y: auto; overflow-x: hidden;"></textarea>
                    <div class="editor_toolbar">
                      <a href="javascript:void(0);" class="icon_emotion emotion_switch js_switch"></a>
                      <a href="javascript:void(0);" class="icon_emotion pic_switch"
                        data-type="file"></a>
                      <input type="file" class="upload_file" style="display:none;">
                      <div class="emotion_wrp js_emotionArea">
                        <span class="hook">
                          <span class="hook_dec hook_top"></span>
                          <span class="hook_dec hook_btm"></span>
                        </span>
                        <ul class="emotions" onselectstart="return false;">
                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_0"
                              data-title="[笑]" style="background-position:0 -1766px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_1"
                              data-title="[大笑]" style="background-position:0 -616px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_2"
                              data-title="[憨笑]" style="background-position:0 -1582px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_3"
                              data-title="[破涕为笑]" style="background-position:0 -1858px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_4"
                              data-title="[眯眼笑]" style="background-position:0 -341px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_5"
                              data-title="[吐舌]" style="background-position:0 -432px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_6"
                              data-title="[眨眼]" style="background-position:0 -524px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_7"
                              data-title="[眼红]" style="background-position:0 -800px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_8"
                              data-title="[亲亲]" style="background-position:0 -1352px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_9"
                              data-title="[热恋]" style="background-position:0 -116px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_10"
                              data-title="[惊讶]" style="background-position:0 -754px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_11"
                              data-title="[震惊]" style="background-position:0 -892px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_12"
                              data-title="[累]" style="background-position:0 -984px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_13"
                              data-title="[头晕]" style="background-position:0 -1076px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_14"
                              data-title="[疲惫]" style="background-position:0 -1168px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_15"
                              data-title="[口罩]" style="background-position:0 -1260px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_16"
                              data-title="[难过]" style="background-position:0 -1444px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_17"
                              data-title="[不开心]" style="background-position:0 -1536px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_18"
                              data-title="[呆滞]" style="background-position:0 -1674px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_19"
                              data-title="[冥思]" style="background-position:0 -1720px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_20"
                              data-title="[痛苦]" style="background-position:0 -1812px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_21"
                              data-title="[懵逼]" style="background-position:0 -1904px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_22"
                              data-title="[流汗]" style="background-position:0 -249px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_23"
                              data-title="[嘚瑟]" style="background-position:0 -204px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_24"
                              data-title="[酷]" style="background-position:0 -160px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_25"
                              data-title="[哭]" style="background-position:0 -1628px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_26"
                              data-title="[生病]" style="background-position:0 -76px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_27"
                              data-title="[受伤]" style="background-position:0 -1490px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_28"
                              data-title="[睡觉]" style="background-position:0 -34px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_29"
                              data-title="[思考]" style="background-position:0 -1306px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_30"
                              data-title="[天使]" style="background-position:0 -1214px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_31"
                              data-title="[闭嘴]" style="background-position:0 -1122px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_32"
                              data-title="[害怕]" style="background-position:0 -1030px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_33"
                              data-title="[奸笑]" style="background-position:0 -938px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_34"
                              data-title="[离线]" style="background-position:0 -846px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_35"
                              data-title="[斜眼]" style="background-position:0 -708px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_36"
                              data-title="[哭泣]" style="background-position:0 -662px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_37"
                              data-title="[恐惧]" style="background-position:0 -570px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_38"
                              data-title="[愤怒]" style="background-position:0 -478px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_39"
                              data-title="[恶魔]" style="background-position:0 -387px;"></span>
                          </li>

                          <li class="emotions_item">
                            <span class="icon_emotion_sprite js_emotion_i" data-name="icon_smiley_40"
                              data-title="[中毒]" style="background-position:0 -295px;"></span>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </div>
                </div>
                <span class="btn btn-primary m-t-md btn-s-sm" onclick="sendMessage()">发送</span>
              </div>
            </section>
          </section>
        </section>
      </section>
    </section>
  </section>


  <script src="js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="js/bootstrap.js"></script>
  <!-- App -->
  <script src="js/app.js"></script>
  <!--引入layer-->
  <script src="plugins/layer/layer.js"></script>

  <script src="js/NIM_Web_NIM_v4.8.0.js"></script>

  <script type="text/javascript">
    var data = {};
    // 注意这里, 引入的 SDK 文件不一样的话, 你可能需要使用 SDK.NIM.getInstance 来调用接口
    var nim = NIM.getInstance({
      debug: true,
      appKey: '0166f645cd217b76b6e3bb3fbb9ceeee',
      account: 'yomo_local_1',
      token: 'e10adc3949ba59abbe56e057f20f883e',
      onconnect: onConnect,
      onwillreconnect: onWillReconnect,
      ondisconnect: onDisconnect,
      onerror: onError,
      onmsg: onMsg,
      // onsessions: onSessions
    });

    function onConnect() {
      $('.current-status').html('连接成功');
      console.log('连接成功');
      nim.getLocalMsgs({
        sessionId: 'p2p-' + getUrlParam('userId'),
        limit: 100,
        done: getLocalMsgsDone
      })
      nim.getUser({
        account: getUrlParam('userId'),
        done: getUserDone
      });
      nim.setCurrSession('p2p-' + getUrlParam('userId'));
    }
    function onWillReconnect(obj) {
      // 此时说明 SDK 已经断开连接, 请开发者在界面上提示用户连接已断开, 而且正在重新建立连接
      $('.current-status').html('即将重连');
      console.log('即将重连');
      console.log(obj.retryCount);
      console.log(obj.duration);
    }
    function onDisconnect(error) {
      // 此时说明 SDK 处于断开状态, 开发者此时应该根据错误码提示相应的错误信息, 并且跳转到登录页面
      console.log('丢失连接');
      console.log(error);
      layer.open({
        title: '提示',
        content: error + '\n 丢失连接,确认重连吗？',
        yes: function () {
          window.location.href = 'messageList.html';
        },
        cancel: function () {
          //右上角关闭回调
          return false;
        }
      });
    }

    function pushMsg(msgs) {
      if (!Array.isArray(msgs)) { msgs = [msgs]; }
      var sessionId = msgs[0].scene + '-' + msgs[0].account;
      data.msgs = data.msgs || {};
      data.msgs[sessionId] = nim.mergeMsgs(data.msgs[sessionId], msgs);
    }
    function onCustomMsg(msg) {
      // 处理自定义消息
    }
    function sendMessage() {
      var msg = nim.sendText({
        scene: 'p2p',
        to: getUrlParam('userId'),
        text: $(".js_editorArea").val(),
        done: sendMsgDone
      });
      $(".js_editorArea").val("");
      var html = '';
      html += '<div class="' + msg.from + ' server m-b-md">' +
        '<img src="images/app.png">' +
        '<block>' +
        '<small class="m-r text-muted">' + format(msg.time) + '</small>' +
        '<span class="hook">' +
        '<span class="hook_dec hook_top"></span>' +
        '<span class="hook_dec hook_btm"></span>' +
        '</span>' +
        '<div class="m-r">' + buildemo(msg.text) + '</div>' +
        '</block>' +
        '</div>';
      $('.chatContent').append(html);
      console.log('正在发送p2p text消息, id=' + msg.idClient);
    }

    function sendMsgDone(error, msg) {
      console.log(error);
      console.log(msg);
      console.log('发送' + msg.scene + ' ' + msg.type + '消息' + (!error ? '成功' : '失败') + ', id=' + msg.idClient);
      nim.getUser({
        account: msg.from,
        done: getUserDone
      });
      scrollToEnd();
      pushMsg(msg);
    }
    function onError(error) {
      console.log(error);
    }
    var NewInfoNum = 0;
    function onMsg(msg) {
      console.log('收到消息', msg.scene, msg.type, msg);
      pushMsg(msg);
      if (msg.from != getUrlParam('userId')) {
        NewInfoNum++;
        $('#NewInfo').html('有' + NewInfoNum + '条新消息');
        return;
      }
      switch (msg.type) {
        case 'text':
          updateMsgs(msg);
          layer.msg('收到消息', function () {
            scrollToEnd();
          });
          break;
        case 'custom':
          onCustomMsg(msg);
          break;
        case 'notification':
          // 处理群通知消息
          onTeamNotificationMsg(msg);
          break;
        // 其它case
        default:
          break;
      }
    }

    function updateMsgs(obj) {
      var singleMsg = '';
      singleMsg += '<div class="' + obj.from + ' customer m-b-md">' +
        '<img src="images/app.png">' +
        '<block>' +
        '<small class="m-l text-muted">' + format(obj.time) + '</small>' +
        '<span class="hook">' +
        '<span class="hook_dec hook_top"></span>' +
        '<span class="hook_dec hook_btm"></span>' +
        '</span>' +
        '<div class="m-l">' + buildemo(obj.text) + '</div>' +
        '</block>' +
        '</div>';
      $('.chatContent').append(singleMsg);
      nim.getUser({
        account: obj.from,
        done: getUserDone
      });
      nim.setCurrSession(obj.sessionId);
    }
    function getLocalMsgsDone(error, obj) {
      console.log('获取本地消息' + (!error ? '成功' : '失败'), error, obj);
      for (var i = obj.msgs.length - 1; i >= 0; i--) {
        updateSessionsUI(obj.msgs[i]);
      }
      scrollToEnd();
    }

    function updateSessionsUI(obj) {
      switch (obj.type) {
        case 'text':
          joinText(obj);
          break;
        case 'image':
          joinImage(obj);
          break;
        case 'video':
          joinVideo(obj);
          break;
      }
    }
    function joinText(obj) {
      var html = '';
      html += '<div class="' + (obj.flow == 'in' ? 'customer ' : 'server ') + obj.from + ' m-b-md">' +
        '<img src="images/app.png"/>' +
        '<block>' +
        '<small class="' + (obj.flow == 'in' ? 'm-l ' : 'm-r ') + 'text-muted">' + format(obj.time) + '</small>' +
        '<span class="hook">' +
        '<span class="hook_dec hook_top"></span>' +
        '<span class="hook_dec hook_btm"></span>' +
        '</span><div class="' + (obj.flow == 'in' ? 'm-l' : 'm-r') + '">' + buildemo(obj.text) + '</div>' +
        '</block>' +
        '</div>';
      $('.chatContent').append(html);
    }
    function joinImage(obj) {
      var html = '';
      html += '<div class="' + (obj.flow == 'in' ? 'customer ' : 'server ') + obj.from + ' m-b-md">' +
        '<img src="images/app.png"/>' +
        '<block>' +
        '<small class="' + (obj.flow == 'in' ? 'm-l ' : 'm-r ') + 'text-muted">' + format(obj.time) + '</small>' +
        '<p class="' + (obj.flow == 'in' ? 'm-l' : 'm-r') + '"><img src= "' + obj.file.url + '" onclick="imgMagnify($(this).attr(\'src\'))"/></p>' +
        '</block>' +
        '</div>';
      $('.chatContent').append(html);
    }
    function joinVideo(obj) {
      var html = '';
      html += '<div class="' + (obj.flow == 'in' ? 'customer ' : 'server ') + obj.from + ' m-b-md">' +
        '<img src="images/app.png"/>' +
        '<block>' +
        '<small class="' + (obj.flow == 'in' ? 'm-l ' : 'm-r ') + 'text-muted">' + format(obj.time) + '</small>' +
        '<p class="' + (obj.flow == 'in' ? 'm-l' : 'm-r') + '"><video src="' + obj.file.url + '" controls="controls">您的浏览器不支持 video 标签。</video></p>' +
        '</block>' +
        '</div>';
      $('.chatContent').append(html);
    }

    function getUserDone(error, user) {
      console.log(user);
      console.log('获取用户资料' + (!error ? '成功' : '失败'));
      if (!error) {
        //更新id为user.account的div的内容
        $('.chatTo').html('与' + user.nick + '会话中');
        $('.' + user.account + '> img').attr('src', user.avatar);
      }
    }

    // 获取指定查询字符串
    function getUrlParam(st) {
      var url = location.search;
      var theRequest = new Object();
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
        }
        return theRequest[st] ? decodeURI(theRequest[st]) : undefined;
      }
    }


  </script>

  <script>
    var emoji = { "[笑]": { file: "emo-001@2x.png" }, "[大笑]": { file: "emo-002@2x.png" }, "[憨笑]": { file: "emo-003@2x.png" }, "[破涕为笑]": { file: "emo-004@2x.png" }, "[眯眼笑]": { file: "emo-005@2x.png" }, "[吐舌]": { file: "emo-006@2x.png" }, "[眨眼]": { file: "emo-007@2x.png" }, "[眼红]": { file: "emo-008@2x.png" }, "[亲亲]": { file: "emo-009@2x.png" }, "[热恋]": { file: "emo-010@2x.png" }, "[惊讶]": { file: "emo-011@2x.png" }, "[震惊]": { file: "emo-012@2x.png" }, "[累]": { file: "emo-013@2x.png" }, "[头晕]": { file: "emo-014@2x.png" }, "[疲惫]": { file: "emo-015@2x.png" }, "[口罩]": { file: "emo-016@2x.png" }, "[难过]": { file: "emo-017@2x.png" }, "[不开心]": { file: "emo-018@2x.png" }, "[呆滞]": { file: "emo-019@2x.png" }, "[冥思]": { file: "emo-020@2x.png" }, "[痛苦]": { file: "emo-021@2x.png" }, "[懵逼]": { file: "emo-022@2x.png" }, "[流汗]": { file: "emo-023@2x.png" }, "[嘚瑟]": { file: "emo-024@2x.png" }, "[酷]": { file: "emo-025@2x.png" }, "[哭]": { file: "emo-026@2x.png" }, "[生病]": { file: "emo-027@2x.png" }, "[受伤]": { file: "emo-028@2x.png" }, "[睡觉]": { file: "emo-029@2x.png" }, "[思考]": { file: "emo-030@2x.png" }, "[天使]": { file: "emo-031@2x.png" }, "[闭嘴]": { file: "emo-032@2x.png" }, "[害怕]": { file: "emo-033@2x.png" }, "[奸笑]": { file: "emo-034@2x.png" }, "[离线]": { file: "emo-035@2x.png" }, "[斜眼]": { file: "emo-036@2x.png" }, "[哭泣]": { file: "emo-037@2x.png" }, "[恐惧]": { file: "emo-038@2x.png" }, "[愤怒]": { file: "emo-039@2x.png" }, "[恶魔]": { file: "emo-040@2x.png" }, "[中毒]": { file: "emo-041@2x.png" } };
    /**
    * 通过正则替换掉文本消息中的emo表情
    * @param text：文本消息内容
    */
    function buildemo(text) {
      var re = /\[([^\]\[]*)\]/g;
      var matches = text.match(re) || [];
      for (var j = 0, len = matches.length; j < len; ++j) {
        if (emoji[matches[j]]) {
          text = text.replace(matches[j], '<img class="emo" src="images/emoji/' + emoji[matches[j]].file + '" />');
        }
      }
      return text;
    }
    // 滚动到对话框底部
    function scrollToEnd() {
      var div = document.getElementsByClassName('chatContent')[0];
      div.scrollTop = div.scrollHeight;
    }

    function add0(m) { return m < 10 ? '0' + m : m }
    function format(shijianchuo) {
      //shijianchuo是整数，否则要parseInt转换
      var time = new Date(shijianchuo);
      var y = time.getFullYear();
      var m = time.getMonth() + 1;
      var d = time.getDate();
      var h = time.getHours();
      var mm = time.getMinutes();
      var s = time.getSeconds();
      return y + '-' + add0(m) + '-' + add0(d) + ' ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
    }

    //  查看图片
    function imgMagnify(imgUrl) {
      layer.open({
        type: 1,
        title: false,
        closeBtn: 2,
        area: '80%',
        offset: '10%',
        move: '.imgDrag',
        skin: 'layui-layer-nobg', //没有背景色
        shadeClose: true,
        content: '<div style="text-align: center">' +
          '<img  class="imgDrag" style="max-width:100%" src="' + imgUrl + '">' +
          '</div>'
      });
    }

    $(document).on('click', '[data-type]', function (e) {
      e.stopPropagation();
      var $data = $(this).data();
      if ($data.type === 'file') {
        $(this).next().trigger('click');
      }
    })
    $('.upload_file').change(function () {
      nim.sendFile({
        scene: 'p2p',
        to: getUrlParam('userId'),
        type: 'image',
        fileInput: this,
        uploaddone: function (error, file) {
          console.log(error);
          console.log(file);
          console.log('上传' + (!error ? '成功' : '失败'));
          !error ? sendPic(file.url) : layer.msg('发送失败！请重试！' + error)
        },
        beforesend: function (msg) {
          console.log('正在发送p2p image消息, id=' + msg.idClient);
          pushMsg(msg);
        },
        done: sendMsgDone
      });
    })

    function sendPic(obj) {
      var html = '';
      html += '<div class="server m-b-md">' +
        '<img src="images/YOMO.png"/>' +
        '<block>' +
        '<small class="m-r text-muted">' + format(new Date()) + '</small>' +
        '<p class="m-r"><img src= ' + obj + ' onclick="imgMagnify($(this).attr(\'src\'))"/></p>' +
        '</block>' +
        '</div>';
      $('.chatContent').append(html);
      scrollToEnd();
    }

    $(function () {
      // setTimeout('scrollToEnd()', 500);
      $('.js_switch').click(function (e) {
        e.stopPropagation;
        $('.js_emotionArea').toggle();
      })

      document.addEventListener('click', function () {
        if ($('.emotion_wrp').css('display') == 'block')
          $('.emotion_wrp').hide();
      }, true)

      $('.emotions_item .js_emotion_i').each(function (k, v) {
        $(this).on('click', function () {
          var html = $(this).data('title');
          $('.js_editorArea').val($('.js_editorArea').val() + html);
        })
      })
    })

  </script>
</body>

</html>